<template>
  <div>
    <el-row justify="center">
      <h1>客户管理</h1>
    </el-row>
    <el-row>
      <el-col :span="22">
        <div style="display: flex ;justify-content: space-evenly">
          <el-button type="primary" @click="this.showAdd=true">添加客户</el-button>

          <el-form-item label="客户名称" style="width: 250px">
            <el-input clearable v-model="paramObj.name"/>
          </el-form-item>
          <el-form-item label="经营范围" style="width: 250px">
            <el-input  clearable v-model="paramObj.ranges"/>
          </el-form-item>
          <el-button @click="findByItem(1)" type="primary">查询</el-button>

        </div>
        <el-table :data="cutObj.records" style="width: 100%;margin-bottom: 20px " border stripe>
          <el-table-column prop="name" label="客户名称"/>
          <el-table-column prop="headerName" label="负责人"/>
          <el-table-column prop="ranges" label="经营范围"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="findById(scope.row.id)">查询</el-button>
              <el-button type="primary" @click="findByIdu(scope.row.id)">修改信息</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="this.cutObj.total"
            @current-change="findByItem"
        />

        <!--    个人信息弹出框    -->
        <el-dialog
            v-model="showInfo"
            title="客户详情信息" center
        >
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="客户名称">
              {{ clientObj.name }}
            </el-form-item>
            <el-form-item label="负责人">
              {{ clientObj.headerName }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="负责人电话 ">
              {{ clientObj.headerPhone }}
            </el-form-item>
            <el-form-item label="办公地址">
              {{ clientObj.address }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label=" 邮箱 ">
              {{ clientObj.email }}
            </el-form-item>
            <el-form-item label="经营范围 ">
              {{ clientObj.ranges }}
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="showInfo = false">
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>
        <!--   修改弹出框    -->
        <el-dialog
            v-model="showUpdate"
            title="修改客户信息" center
        >
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="客户名称">
              {{ updateObj.name }}
            </el-form-item>
            <el-form-item label="负责人">
              <el-input v-model="updateObj.headerName" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="负责人电话 ">
              <el-input v-model="updateObj.headerPhone" clearable style="width: 120px"></el-input>
            </el-form-item>
            <el-form-item label="办公地址">
              {{ updateObj.address }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label=" 邮箱 ">
              {{ updateObj.email }}
            </el-form-item>
            <el-form-item label="经营范围 ">
              <el-input v-model="updateObj.ranges" clearable></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="update">
          修改
        </el-button>
      </span>
          </template>
        </el-dialog>
        <!--添加-->
        <el-dialog
            v-model="showAdd"
            @close="clean"
            title="添加客户信息" center>
          <el-form :inline="true"
                   :model="addObj"
                   :rules="rules"
                   label-width="120px"
                   class="demo-ruleForm"
                   status-icon
                   ref="addA"

          >
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="addObj.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="headerName" >
              <el-input v-model="addObj.headerName" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form
              :inline="true"
              :model="addObj"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              status-icon
              ref="addB"
          >
            <el-form-item label="负责人电话 " prop="headerPhone">
              <el-input v-model="addObj.headerPhone" clearable></el-input>
            </el-form-item>
            <el-form-item label="办公地址" prop="address">
              <el-input v-model="addObj.address" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-form
              :inline="true"
              :model="addObj"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              status-icon
              ref="addC"
          >
            <el-form-item label=" 邮箱 " prop="email">
              <el-input v-model="addObj.email" clearable></el-input>
            </el-form-item>
            <el-form-item label="经营范围 " prop="ranges">
              <el-input v-model="addObj.ranges" clearable></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="add">
          添加
        </el-button>
      </span>
          </template>
        </el-dialog>
      </el-col>
    </el-row>


  </div>


</template>
<script>
import axios from "axios"

export default {
  data() {
    return {
      cutObj: {},
      currentPage: '',
      pageSize: 3,
      paramObj: {},
      showInfo: false,
      clientObj: {},
      formInline: "",
      showUpdate: false,
      form: "",
      updateObj: {},
      addObj: {},
      showAdd: false,
      f: "",

      errorAddInfo: "",
      rules: {
        name: [{required: true, message: '客户名不能为空', trigger: 'blur'}],
        headerName: [{required: true, message: '负责人不能为空', trigger: 'blur'}],
        headerPhone: [{required: true, message: '负责人电话不能为空', trigger: 'blur'}],
        address: [{required: true, message: '办公地址不能为空', trigger: 'blur'}],
        email: [{required: true, message: '邮箱不能为空', trigger: 'blur'}],
        ranges: [{required: true, message: '经营范围不能为空', trigger: 'blur'}],

      }

    }
  }, methods: {
    clean() {
      this.$refs.addA.resetFields();
      this.$refs.addB.resetFields();
      this.$refs.addC.resetFields();
    },
    findByItem(pageNO) {
      this.currentPage = pageNO;
      this.paramObj.pageNO = pageNO;
      axios.get('/project/client/findByItem', {params: this.paramObj}).then(resp => {
        this.cutObj = resp.data;

      })

    },
    findById(id) {
      axios.get('/project/client/findById', {params: {clientId: id}}).then(resp => {
        this.showInfo = true;
        this.clientObj = resp.data;
      })
    },
    update() {
      axios.get("/project/client/updateClient", {
        params: {
          headerName: this.updateObj.headerName,
          headerPhone: this.updateObj.headerPhone,
          ranges: this.updateObj.ranges,
          clientId: this.updateObj.id

        }
      }).then(resp => {
        let info = resp.data;
        if (info == "ok") {
          this.findByItem(1);
          this.showUpdate = false;
        }
      })

    },
    findByIdu(id) {
      axios.get('/project/client/findById', {params: {clientId: id}}).then(resp => {
        this.showUpdate = true;
        this.updateObj = resp.data;
      })
    },
    add() {
      axios.get('/project/client/addClient', {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
          this.clean();
          this.showAdd = false;
        }

      })
    }
  },
  created() {

    this.findByItem(1);

  }
}
</script>

<style scoped>

</style>